<template>
  <a-modal
    :visible="visible"
    title="Edit Todo"
    ok-text="Ok"
    cancel-text="Cancel"
    @ok="save"
    @cancel="close"
  >
    <a-form :model="currentItem" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="Title">
        <a-input v-model:value="currentItem.title" placeholder="Title..." />
      </a-form-item>
      <a-form-item label="Details">
        <a-textarea v-model:value="currentItem.details" placeholder="Details..." :rows="4" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { ref } from 'vue'
export default {
  emits: ['update:visible', 'save'],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => ({})
    }
  },
  setup (props) {
    // 这里ref的用法其实就相当于在data里定义currentItem
    const currentItem = ref({})
    const labelCol = ref({ span: 4 })
    const wrapperCol = ref({ span: 18 })
    return { currentItem, labelCol, wrapperCol }
  },
  methods: {
    save () {
      this.$emit('save', this.currentItem)
      this.close()
    },
    close () {
      this.$emit('update:visible', false)
    }
  },
  watch: {
    visible: {
      handler (val) {
        if (val) {
          this.currentItem = {...this.item}
        }
      },
      immediate: true
    }
  }
}
</script>
